$editor-slider: (
  trigger-width: rem(6px),
  text-width: rem(38px),
);

@include b('slider') {
  @include set-component-css-var(editor-slider, $editor-slider);

  display: flex;
  align-items: center;
  width: 100%;
  @include e(text) {
    .el-slider__button,
    .el-slider__button-wrapper {
      width: getCssVar('editor-slider', 'trigger-width');
      height: getCssVar('height-control', 'default');
      border: none;
      opacity: 0;
    }

    .el-slider__bar {
      border-radius: getCssVar('border-radius', 'small');
    }

    .el-slider__runway.is-disabled .el-slider__bar {
      background-color: getCssVar(color, primary);
    }
    @include m(val) {
      min-width: getCssVar('editor-slider', 'text-width');;
      margin-left: getCssVar(spacing, tight);
    }
  }

  @include e('circle') {
    @include m('text') {
      font-size: getCssVar('font-size', 'regular');
    }

    .el-progress {
      --el-fill-color-light: var(--ibiz-color-fill-0);

      width: 100%;

      .el-progress-circle {
        svg>path:nth-child(2) {
          stroke: getCssVar(color, primary);
        }
      }
    }
  }
}


@include b(form-item){

  @include b(slider) {
    @include when(show-default){
      padding: getCssVar(form-item, hover-edit-padding);
    }
  }
}
